<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="type" @tab-click="handleClick">
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-star-off"></i> 关注时回复</span>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPerm="['wxReply_add']"
            >新增
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column label="编号" align="center" prop="id"/>
          <el-table-column label="回复消息类型" align="center" prop="repType" :formatter="replyTypeFormat"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                v-hasPerm="['wxReply_edit']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDel(scope.row)"
                v-hasPerm="['wxReply_del']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-chat-line-round"></i> 消息回复</span>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPerm="['wxReply_add']"
            >新增
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column label="编号" align="center" prop="id"/>
          <el-table-column label="请求消息类型" align="center" prop="repType" :formatter="repMsgTypeFormat"/>
          <el-table-column label="回复消息类型" align="center" prop="repType" :formatter="replyTypeFormat"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                v-hasPerm="['wxReply_edit']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDel(scope.row)"
                v-hasPerm="['wxReply_del']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label"><i class="el-icon-news"></i> 关键词回复</span>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPerm="['wxReply_add']"
            >新增
            </el-button>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" border>
          <el-table-column label="编号" align="center" prop="id"/>
          <el-table-column label="关键词" align="center" prop="reqKey"/>
          <el-table-column label="匹配类型" align="center" prop="repMate" :formatter="repMateFormat"/>
          <el-table-column label="回复消息类型" align="center" prop="repType" :formatter="replyTypeFormat"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                v-hasPerm="['wxReply_edit']"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDel(scope.row)"
                v-hasPerm="['wxReply_del']"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="handleType == 'add' ? '新增回复消息' : '修改回复消息'" :visible.sync="dialog1Visible" width="60%">
      <el-form label-width="100px">
        <el-form-item label="请求消息类型" v-if="type == '2'">
          <el-select v-model="objData.reqType" placeholder="请选择">
            <el-option
              v-for="item in dictData.get('wx_req_type')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
              v-if="item.value !== 'event'">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="匹配类型" v-if="type == '3'">
          <el-select v-model="objData.repMate" placeholder="请选择" style="width: 100px">
            <el-option
              v-for="item in dictData.get('wx_rep_mate')"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词" v-if="type == '3'">
          <el-input placeholder="请输入内容" v-model="objData.reqKey" clearable></el-input>
        </el-form-item>
        <el-form-item label="回复消息">
          <WxReplySelect :objData="objData" v-if="hackResetWxReplySelect"></WxReplySelect>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialog1Visible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import {listWxReply, getWxReply, addWxReply, editWxReply, delWxReply} from '@/api/wxmp/wxreply'
import WxReplySelect from '@/components/wx-reply/main.vue'
import {checkPerm, checkRole} from "@/utils/permission"

export default {
  name: 'wxautoreply',
  components: {
    WxReplySelect
  },
  data() {
    return {
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
        ascs: [],//升序字段
        descs: []//降序字段
      },
      paramsSearch: {},
      loading: false,
      dialog1Visible: false,
      type: '1',//类型（1、关注时回复；2、消息回复；3、关键词回复）
      objData: {
        repType: 'text'
      },
      handleType: null,
      dictData: new Map(),
      replyTypeOptions: [],
      repMsgTypeOptions: [],
      hackResetWxReplySelect: false
    }
  },
  watch: {},
  created() {
    this.getPage(this.page)
    this.dictData.set('wx_rep_mate', [{
      value: '1',
      label: '全匹配'
    }, {
      value: '2',
      label: '半匹配'
    }])
    this.getDicts("repMsg_type").then(response => {
      this.repMsgTypeOptions = response.data;
    });
    this.getDicts("reply_type").then(response => {
      this.replyTypeOptions = response.data;
    });
  },
  methods: {
    repMsgTypeFormat(row, column) {
      return this.selectDictLabel(this.repMsgTypeOptions, row.repType);
    },
    replyTypeFormat(row, column) {
      return this.selectDictLabel(this.replyTypeOptions, row.repType);
    },
    repMateFormat(row, column) {
      return this.selectDictLabel(this.dictData.get('wx_rep_mate'), row.repMate);
    },
    handleAdd() {
      this.hackResetWxReplySelect = false//销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true//重建组件
      })
      this.handleType = 'add'
      this.dialog1Visible = true
      this.objData = {
        repType: 'text'
      }
    },
    handleEdit(row) {
      this.hackResetWxReplySelect = false//销毁组件
      this.$nextTick(() => {
        this.hackResetWxReplySelect = true//重建组件
      })
      this.handleType = 'edit'
      this.dialog1Visible = true
      this.objData = Object.assign({}, row)
    },
    handleClick(tab, event) {
      this.tableData = []
      this.page.currentPage = 1
      this.type = tab.name
      this.getPage(this.page)
    },
    searchChange(params, done) {
      params = this.filterForm(params)
      this.paramsSearch = params
      this.page.currentPage = 1
      this.getPage(this.page, params)
      done()
    },
    sortChange(val) {
      let prop = val.prop ? val.prop.replace(/([A-Z])/g, "_$1").toLowerCase() : '';
      if (val.order == 'ascending') {
        this.page.descs = []
        this.page.ascs = prop
      } else if (val.order == 'descending') {
        this.page.ascs = []
        this.page.descs = prop
      } else {
        this.page.ascs = []
        this.page.descs = []
      }
      this.getPage(this.page)
    },
    getPage(page, params) {
      this.loading = true
      listWxReply(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        descs: this.page.descs,
        ascs: this.page.ascs,
        type: this.type
      }, params, this.paramsSearch)).then(response => {
        this.tableData = response.data.records
        this.page.total = response.data.total
        this.page.currentPage = page.currentPage
        this.page.pageSize = page.pageSize
        this.loading = false
        if (this.type == '2') {
          let wxReqType = this.replyTypeOptions
          for (let i = 0; i < wxReqType.length; i++) {
            wxReqType[i].disabled = false
            for (let j = 0; j < this.tableData.length; j++) {
              if (wxReqType[i].value == this.tableData[j].reqType) {
                wxReqType[i].disabled = true
              }
            }
          }
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleDel: function (row, index) {
      var _this = this
      this.$confirm('是否确认删除此数据', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delWxReply(row.id)
      }).then(data => {
        _this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        })
        this.getPage(this.page)
      }).catch(function (err) {
      })
    },
    handleSubmit(row) {
      if (this.handleType == 'add') {
        addWxReply(Object.assign({
          type: this.type
        }, this.objData)).then(data => {
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          this.getPage(this.page)
          this.dialog1Visible = false
        })
      }
      if (this.handleType == 'edit') {
        editWxReply(this.objData).then(data => {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          this.getPage(this.page)
          this.dialog1Visible = false
        })
      }
    },
    /**
     * @title 数据更新
     * @param row 为当前的数据
     * @param index 为当前更新数据的行数
     * @param done 为表单关闭函数
     *
     **/
    handleUpdate: function (row, index, done, loading) {
      editWxReply(row).then(data => {
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        })
        done()
        this.getPage(this.page)
      }).catch(() => {
        loading()
      })
    },
    /**
     * @title 数据添加
     *
     **/
    handleSave: function (row, done, loading) {
      addWxReply(Object.assign({
        type: this.type
      }, this.objData)).then(data => {
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
        this.getPage(this.page)
        this.dialog1Visible = false
      }).catch(() => {
        done()
      })
    },
    /**
     * 刷新回调
     */
    refreshChange(page) {
      this.objData = {
        repType: 'text'
      }
      this.getPage(this.page)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
